<template>
  <div class="prodectTwo">
    <h1>我是ProductTwo</h1>
    <ul>
      <li v-for="(product, index) of products" :key="index">
        <span class="name">{{product.name}}</span>
        <span class="price">{{product.price}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ProdultTwo',
  props: {
    products: Array
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped>
  .prodectTwo
    margin-bottom 30px
    padding: 10px 20px
    margin-top 80px
    background lemonchiffon
  ul
    padding 0
    list-style none
    li
      margin-right 10px
      margin-top 10px
      padding 10px
      width 80px
      background lightblue
      .price
        font-weight 600
        color #120CEB
        display block
</style>
